<template>
  <div>
    <Row class="search-info-style">
      <DatePicker type="year" v-model="param.year" placeholder="选择年份" style="width: 200px;margin-right:10px;"></DatePicker>
      <Select v-model="param.star_level" style="width: 200px;margin-right:10px;">
        <Option :value="1">一星级</Option>
        <Option :value="2">二星级</Option>
        <Option :value="3">三星级</Option>
        <Option :value="4">四星级</Option>
      </Select>
      <Select v-model="param.jiedao_company_code" @on-change="changeOffice(2, param.jiedao_company_code)" style="width: 200px;margin-right:10px;">
        <Option :value="item.code" v-for="(item, index) in officeList.list1" v-bind:key="index">{{item.name}}</Option>
      </Select>
      <Select v-model="param.company_code" style="width: 200px;margin-right:10px;">
        <Option :value="item1.code" v-for="(item1, index1) in officeList.list2" v-bind:key="index1">{{item1.name}}</Option>
      </Select>
      <Button class="new-btn-sty" @click="createStarByYearData()" style="float:right">
        <Icon type="md-add" /> 录入星级评定结果
      </Button>
      <Button class="new-btn-sty" @click="createStarByYearData()" style="float:right">
        <Icon type="md-search" />搜索
      </Button>
    </Row>
    <Table :columns="columns" :data="questionList" border>
      <template  slot-scope="{row, index}" slot="apply_state">
        <span v-if="row.apply_state == '-1'">未推荐</span>
        <span v-if="row.apply_state == '0'">已推荐</span>
        <span v-if="row.apply_state == '1'">已同意</span>
        <span v-if="row.apply_state == '2'">不同意</span>
      </template>
      <template slot-scope="{row, index}" slot="action">
        <Rate v-model="questionList[index].star_level" @on-change="checkStar(row, index)" />
      </template>
      <template slot-scope="{row, index}" slot="recommend" >
        <Button v-if="row.star_level == 4 && row.apply_state == '-1'" @click="setRecom(row, index)">5星推荐</Button>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
  </div>
</template>
<script>
import './index.less'
import { getOffice } from '@/api/eventlist'
import { createStarByYear, getCommunityStarList, updateStar, updateFiveStar } from '@/api/workerV2'
export default {
  name: 'star_rating',
  data () {
    return {
      officeList: {
        list1: [],
        list2: []
      },
      nowYear: '',
      loadData: false,
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'

        },
        {
          title: '区',
          key: 'qu_company_code',
          align: 'center'
        },
        {
          title: '街道',
          key: 'jiedao_company_code',
          align: 'center'
        },
        {
          title: '社区',
          key: 'company_code',
          align: 'center'
        },
        {
          title: '推荐状态',
          slot: 'apply_state',
          align: 'center'
        },
        {
          title: '星级评定',
          slot: 'action',
          align: 'center'
        },
        {
          title: '四星推荐',
          slot: 'recommend',
          align: 'center'
        }
      ],
      dataList: [
        {
          title: '1'
        }
      ],
      formData: {},
      drawer1: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      studySecond: 0,
      isTrue: true,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      questionList: [], // 培训题列表
      systemList: [] // 系统类型
    }
  },
  components: {},
  computed: {
    company_code () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  mounted () {
    // this.getSystemData()
    var myDate = new Date()
    this.nowYear = myDate.getFullYear()
    this.init()
    this.$nextTick(function () {
      this.changeOffice(1, this.company_code)
    })
  },
  methods: {
    changeOffice (index, code) {
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.officeList['list' + index] = res.data.data
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    createStarByYearData () {
      createStarByYear({ year: this.nowYear }).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    init () { // 列表数据
      getCommunityStarList(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.questionList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    searchData () { // 搜索
      // this.searchInfo.pageNo = 1
      this.searchInfo.currentPageNo = 1
      this.param.pageNo = 1
      this.init()
    },
    changePageNo (pageNo) {
      this.param.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.param.pageSize = pageSize
      this.changePageNo(1)
    },
    checkStar (row, index) { // 星级评定
      if (this.questionList[index].star_level === 5) { // 区级不可以直接评定5星
        this.$Notice.warning({
          title: '警告⚠️提示',
          desc: '区级不可以直接将社区评定为5星'
        })
        this.init()
      } else {
        if (confirm('确定对该社区进行' + this.questionList[index].star_level + '星级评定吗？')) {
          updateStar({ id: row.id, star_level: this.questionList[index].star_level }).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '成功提示',
                desc: '星级评定成功'
              })
              this.init()
              return
            }
            this.$Notice.error({
              title: '失败提示',
              desc: res.data.errmsg
            })
          })
        } else {
          this.init()
        }
      }
    },
    setRecom (row, index) {
      if (confirm('是否将该社区推荐到五星？')) {
        updateFiveStar({ id: row.id }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '推荐成功'
            })
            this.init()
            return
          }
          this.$Notice.error({
            title: '失败提示',
            desc: res.data.errmsg
          })
        })
      }
    }
  }
}
</script>
